<template>
  <a-select
    mode="multiple"
    label-in-value
    :value="value"
    placeholder="Select users"
    style="width: 100%"
    :filter-option="false"
    :not-found-content="fetching ? undefined : null"
    @search="fetchUser"
    @change="handleChange"
    @popupScroll="popupScrolFm"
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="d in data" :key="d.value">
      {{ d.text }}
    </a-select-option>
  </a-select>
</template>
<script>
import debounce from 'lodash/debounce';

export default {
  data() {
    this.lastFetchId = 0;
    this.fetchUser = debounce(this.fetchUser, 800);
    return {
      data: [],
      value: [],
      fetching: false,
    };
  },
  methods: {
    fetchUser(value) {
      console.log('fetching user', value);
      this.lastFetchId += 1;
      const fetchId = this.lastFetchId;
      this.data = [];
      this.fetching = true;
      fetch('https://randomuser.me/api/?results=5')
        .then(response => response.json())
        .then(body => {
          if (fetchId !== this.lastFetchId) {
            // for fetch callback order
            return;
          }
          const data = body.results.map(user => ({
            text: `${user.name.first} ${user.name.last}`,
            value: user.login.username,
          }));
             console.log(data)
          //  let dataData=[
          //        {
          //          text: "Ernest Palmer",
          //           value: "1"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "2"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "3"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "4"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "5"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "6"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "7"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "8"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "9"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "10"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "11"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "12"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "13"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "14"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "15"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "16"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "17"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "18"
          //        },
          //          {
          //          text: "Ernest Palmer",
          //           value: "19"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "20"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "21"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "22"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "23"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "24"
          //        },
          //         {
          //          text: "Ernest Palmer",
          //           value: "25"
          //        },
              
          //  ]  
          this.data = data;
          this.fetching = false;
        });
    },
    handleChange(value) {
      Object.assign(this, {
        value,
        data: [],
        fetching: false,
      });
    },
    popupScrolFm(){
      console.log('2222')
    }
  },
};
</script>